<template>
  <div class="custom-ul" :style='borderStyle'>
    <el-scrollbar style="width: 100%;height: 100%">
      <div class="custom-header">
        常见问题列表：
      </div>
      <div v-for="(item,index) in dataList" :key="index" class="custom-li" @click="openEntity(item.title)">
        {{ item.title }}
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { queryAllMore } from '@/api/consult/user'
import { dialog } from '@/mixins/dialog'

export default {
  name: 'ConsultListMore',
  mixins: [dialog],
  data() {
    return {
      dataList: []
    }
  },
  created() {
    this.initObject()
  },
  methods: {
    initObject() {
      queryAllMore().then(res => {
        const { data } = res
        if (data !== null && undefined !== data) {
          this.dataList = data
        } else {
          this.dataList = []
        }
      }).catch(() => {
        this.dataList = []
      })
    },
    openEntity(data) {
      this.$emit('call-back', data)
    }
  }
}
</script>

<style scoped>
.custom-ul {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.custom-header {
  height: 40px;
  line-height: 40px;
  text-align: left;
  text-indent: 10px;
  border-bottom: 1px solid #e2e2e2;
  position: relative;
}
.custom-header::before {
  position: absolute;
  content: " ";
  width: 2px;
  height: 16px;
  top:12px;
  left: 0px;
  background-color: #4a98f6;
}
.custom-li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-decoration: underline;
  text-indent: 8px;
  position: relative;
  font-size: 13px;
  cursor: pointer;
}
.custom-li::before{
  position: absolute;
  content: " ";
  width: 4px;
  height: 4px;
  top:18px;
  left: 0px;
  background-color: #454545;
  border-radius: 2px;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
  margin-right: 0px !important;
}
</style>
